<template>
  <div class="common-container">
    <div class="common-box">
      <div class="left-section">
        <ClientOnly fallback-tag="div" fallback="加载中...">
          <Banner :banners="list"></Banner>
        </ClientOnly>
        <div style="margin-top:20px">
          <NewsLayout :newsData="newsData" />
        </div>
        <ExamIndex />
      </div>
      <div class="right-section">
        <ClientOnly fallback-tag="div" fallback="加载中...">
          <ExamRightPannel></ExamRightPannel>
        </ClientOnly>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { getBannerList, getAricleDataListHot } from '~/service/banner.js';
import ExamRightPannel from './ExamRightPannel.vue';

// 统计数据

const list = ref([])
const backList = [
  {
    imageUrl: '../static/background.png',
  },
  {
    imageUrl: '../static/background.png',
  },
  {
    imageUrl: '../static/background.png',
  },
  {
    imageUrl: '../static/background.png',
  }
]
const newsData = ref([])
onMounted(() => {
  initBanner();
  initAricleInit();
})
const initAricleInit = async () => {
  try {
    let response = await getAricleDataListHot({
      "page": 1,
      "rows": 10,
      "typeid": 209
    })
    newsData.value=response.data.result||[];
  } catch (e) {
    newsData.value=[];
    //TODO handle the exception
  }
}
const initBanner = async () => {
  try {
    let response = await getBannerList({ "typeid": 1 });
    // console.log(response.data
    list.value = response.data.length ? response.data : backList
  } catch (error) {
    list.value = [];
  }
}

</script>

<style scoped lang="scss">
.common-container {
  display: flex;
  justify-content: center;

  .common-box {
    width: 1200px;
    display: flex;
    justify-content: space-between;

    .left-section {
      width: 777px;

      //   border: 1px solid #000;
    }

    .right-section {
      width: 379px;
      margin-left: 20px;
      // background-color:pink;
      //   border: 1px solid red

      .time-day {
        color: #126983;
        font-size: 24px;
        font-weight: 600;
      }
    }
  }

  .days-tiem {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
}
</style>